<template>
  <div class="single-page-container" v-loading="loading">
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14" class="single-page-content content-1">
        <div class="panel panel-info">
          <div class="panel-content">
            <div class="line-1">
              <div class="user">
                <div class="avatar">
                  <i class="el-icon-user-solid"></i>
                </div>
                <div class="text">
                  <div class="name ellipsis">{{ AiInfo.company_boss }}</div>
                  <div class="phone ellipsis">{{ AiInfo.company_phone }}</div>
                </div>
              </div>
              <div class="label-list" v-if="infoType === 'AI'">
                <div class="label">
                  <div class="title">{{ AiInfo.talk_sts }}级（{{ talkStsList[AiInfo.talk_sts] }}）</div>
                  <div class="desc">意向标签</div>
                </div>
                <div class="label">
                  <div class="title">AI外呼轮次</div>
                  <div class="desc">1轮</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="panel panel-desc">
          <div class="title">基本资料</div>
          <div class="list">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <div class="item">
                  <div class="label">公司名称:</div>
                  <div class="value" :title="AiInfo.company_name">{{ AiInfo.company_name }}</div>
                </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <div class="item">
                  <div class="label">联系人:</div>
                  <div class="value" :title="AiInfo.company_boss">{{ AiInfo.company_boss }}</div>
                </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <div class="item">
                  <div class="label">公司地址:</div>
                  <div class="value" :title="AiInfo.company_address">{{ AiInfo.company_address }}</div>
                </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <div class="item">
                  <div class="label">联系电话:</div>
                  <div class="value" :title="AiInfo.company_phone">{{ AiInfo.company_phone }}</div>
                  <!-- <outCall :uname="uname" /> -->
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="panel panel-record">
          <el-row class="row">
            <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10" class="panel-left">
              <div class="desc">{{ AiInfo.phone_follow_list && AiInfo.phone_follow_list.length }}条回访记录</div>
              <div class="list" v-if="AiInfo.phone_follow_list && AiInfo.phone_follow_list.length > 0">
                <div class="item" ref="recordItem" v-for="item in AiInfo.phone_follow_list" :key="item.callInstanceId">
                  <div class="avatar">
                    <i class="el-icon-user-solid"></i>
                  </div>
                  <div class="center">
                    <div class="line">
                      <el-row>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                          <div class="text-1">{{ getFollowName(item.follow_id) }} 【{{ getFollowTypeName(item.follow_type) }}】</div>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                          <div class="time" style="text-align: right">{{ item.created_time }}</div>
                        </el-col>
                      </el-row>
                    </div>
                    <div class="text-2">{{ item.desc }}</div>
                  </div>
                </div>
              </div>
              <el-empty v-else description="暂无数据" :image-size="100"></el-empty>
            </el-col>
            <el-col :xs="24" :sm="24" :md="224" :lg="14" :xl="14" class="panel-right">
              <div class="title">添加回访记录</div>
              <el-form size="mini" :model="form" :rules="rules" ref="form" class="form">
                <el-form-item label="回访结果:" :label-width="formLabelWidth" prop="follow_type">
                  <el-radio-group v-model="form.follow_type">
                    <el-radio v-for="item in followTypeList" :key="item.value" :label="item.value"> {{ item.label }} </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="备注:" :label-width="formLabelWidth" prop="desc">
                  <el-input type="textarea" :rows="8" v-model="form.desc" autocomplete="off" maxlength="1000" placeholder="请输入备注"></el-input>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth">
                  <el-button size="mini" type="primary" @click="onSubmit">添加</el-button>
                  <el-button size="mini" @click="resetForm">重置</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col v-if="infoType === 'AI'" :xs="24" :sm="24" :md="24" :lg="10" :xl="10" class="single-page-content content-2">
        <div class="audio-box">
          <audio :src="AiInfo.talk_mp3" controls ref="audio"></audio>
        </div>
        <div class="content-center">
          <template v-if="AiInfo.content && AiInfo.content.length > 0">
            <div class="list" v-for="(item, index) in AiInfo.content" :key="index">
              <div v-if="item.speaker == 'ME'" class="item">
                <div class="avatar">
                  <i class="el-icon-user-solid"></i>
                </div>
                <div class="dialog light" @click="play(item)">
                  <img :class="item.playing ? 'playing' : ''" v-if="logo" src="@/assets/icons/yuyin.png" class="icon-yuyin" />
                  {{ item.content }}
                </div>
              </div>
              <div class="item right" v-else>
                <div class="dialog">
                  {{ item.content }}
                </div>
                <div class="avatar">
                  <img v-if="logo" :src="logo" class="img-logo" />
                </div>
              </div>
            </div>
          </template>
          <el-empty v-else description="暂无数据" :image-size="150"></el-empty>
        </div>
        <div class="bottom">
          <div class="line line1">
            <div class="list">
              <div class="item" title="修改意向标签" :class="level === key ? 'active' : ''" @click="handleChangeRalkSts(key)" v-for="(item, key) in talkStsList" :key="item">{{ key }}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col v-if="infoType === 'message'" :xs="24" :sm="24" :md="24" :lg="10" :xl="10" class="single-page-content content-2">
        <div class="content-center">
          <div class="message-box" v-if="AiInfo.content">
            <div class="list">
              <div class="item">
                <div class="avatar">
                  <i class="el-icon-user-solid"></i>
                </div>
                <div class="dialog light" @click="play(item)">
                  <div class="message-title">
                    {{ AiInfo.content.title }}
                  </div>
                  <div class="message-content">
                    {{ AiInfo.content.content }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无数据" :image-size="150"></el-empty>
        </div>
        <div class="bottom"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import outCall from './components/outCall.vue'
import logo from '@/assets/img/logo.png'
import { apiUserDeptShow, apiChangeRecordLevel, apiAiTaskDetail, apiAiTaskDetailStatistics, apiPhoneFollowAdd, apiCustomerMessageDetail } from '@/api/outboundCall'

export default {
  name: 'record',
  components: { outCall },
  data() {
    return {
      loading: false,
      id: '',
      AiInfo: {},
      logo: logo,
      hasPrev: true,
      hasNext: true,
      id: '',
      level: '',
      timer: null,
      companyInfo: {},
      companyInfoDesc: {},
      companyInfoPeople: {},
      companyInfoLabels: {},
      talkStsList: {
        A: '确认发布',
        B: '准备发布',
        C: '有明确意向',
        D: '有意向',
        E: '意向模糊',
        F: '没有意向',
      },
      followTypeList: [
        { value: 1, label: '无法接通' },
        { value: 2, label: '无人接听' },
        { value: 3, label: '拒接' },
        { value: 4, label: '用户正忙' },
        { value: 5, label: '没有东西卖' },
        { value: 6, label: '回收' },
        { value: 7, label: '添加微信' },
        { value: 8, label: '已发资产' },
        { value: 9, label: '已发独享' },
        { value: 10, label: '重复发送' },
        { value: 11, label: '空号' },
      ],
      audioLength: 0,
      formLabelWidth: '90px',
      form: {
        follow_type: 1,
        desc: '',
      },
      rules: {},
      userList: [],
      infoType: 'AI', // AI / message
      uname: '',
    }
  },
  created() {
    const { id, uid, t, uname } = this.$route.query
    if (!(id || t)) {
      this.$message({
        type: 'error',
        message: 'id为空',
      })
    } else {
      if (id) {
        this.infoType = 'AI'
        this.id = id
      } else if (t) {
        this.infoType = 'message'
        this.id = t
      }
      this.uid = uid
      this.uname = uname
    }
  },
  mounted() {
    this.getUserList()
  },
  methods: {
    // 页面统计
    statistics() {
      const info = {
        id: this.id,
        url: location.href,
        user_id: this.uid,
        job_type: 1,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiAiTaskDetailStatistics(formData)
    },
    // 获取数据
    getInfo() {
      this.loading = true
      if (this.infoType === 'AI') {
        const info = { id: this.id }
        const formData = new FormData()
        for (let key in info) {
          formData.set(key, info[key])
        }
        apiAiTaskDetail(formData)
          .then((res) => {
            const { id, talk_sts, company_id } = res.data
            res.data.content.forEach((item) => {
              item.playing = false
            })
            this.AiInfo = res.data
            this.id = id
            this.level = talk_sts
            const audio = this.$refs.audio
            audio.addEventListener('loadedmetadata', () => {
              this.audioLength = audio.duration
            })
            this.$nextTick(() => {
              const refList = this.$refs.recordItem
              if (refList) {
                const length = refList.length
                const lastItem = refList[length - 1]
                lastItem.scrollIntoView()
              }
            })
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      } else {
        const info = { t: this.id, user_id: this.uid }
        const formData = new FormData()
        for (let key in info) {
          formData.set(key, info[key])
        }
        apiCustomerMessageDetail(formData)
          .then((res) => {
            const { id, talk_sts, company_id } = res.data
            this.AiInfo = res.data
            this.id = id
            this.level = talk_sts
            this.$nextTick(() => {
              const refList = this.$refs.recordItem
              if (refList) {
                const length = refList.length
                const lastItem = refList[length - 1]
                lastItem.scrollIntoView()
              }
            })
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      }
    },
    // 获取人员下拉
    getUserList() {
      apiUserDeptShow().then((res) => {
        const { data } = res
        data.unshift({
          id: '',
          nickname: '全部',
        })
        this.userList = data
        this.getInfo()
      })
    },
    // 修改意向等级
    handleChangeRalkSts(sts) {
      let info = {
        id: this.id,
        level: sts,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiChangeRecordLevel(formData).then((res) => {
        if (res.code === 200) {
          this.$message.success('操作成功！')
          this.$emit('changeLevel', { id: this.id, sts })
          this.level = sts
        }
      })
    },
    // 播放音频片段
    play(item) {
      const audio = this.$refs.audio
      audio.currentTime = item.startTime / 1000
      audio.play()
      clearTimeout(this.timer)
      this.timer = null
      this.AiInfo.content.forEach((item) => {
        item.playing = false
      })
      item.playing = true
      this.timer = setTimeout(() => {
        item.playing = false
        audio.pause()
        audio.currentTime = 0
      }, item.endTime - item.startTime)
    },
    // 添加回访记录
    onSubmit() {
      const info = {
        id: this.id,
        user_id: this.uid,
        follow_type: this.form.follow_type,
        desc: this.form.desc,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiPhoneFollowAdd(formData).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '添加成功',
          })
          this.resetForm()
          this.getInfo()
        }
      })
    },
    // 重置表单
    resetForm() {
      this.$refs.form.resetFields()
    },
    // 获取类型名称
    getFollowTypeName(value) {
      const item = this.followTypeList.find((item) => {
        return item.value === value
      })
      if (item) {
        return item.label
      } else {
        return ''
      }
    },
    // 获取人名
    getFollowName(id) {
      const item = this.userList.find((item) => {
        return item.id === id
      })
      if (item) {
        return item.nickname
      } else {
        return ''
      }
    },
  },
}
</script>

<style scoped lang="scss">
@media screen and (min-width: 1200px) {
  .single-page-container {
    height: 100%;
    overflow: hidden;
    .content-1 {
      height: 100vh;
    }
    .content-2 {
      height: 100vh;
    }
    .panel-record .row {
      height: 100%;
    }
  }
}
.single-page-container {
  width: 100vw;
  background: rgb(243, 244, 245);
  box-shadow: inset 0px 0px 16px 0px #e0e0e0;
}
.content-1 {
  padding: 10px;
  font-size: 14px;
  .avatar {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background: rgb(217, 236, 255);
    border-radius: 50%;
    color: #409eff;
    font-size: 18px;
    margin-right: 10px;
  }

  .panel {
    width: 100%;
    padding: 10px;
    background: #ffffff;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .panel-info {
    padding: 10px;
    flex-shrink: 0;
    .panel-content {
      .line-1 {
        height: 68px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .user {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          .text {
            .name {
              font-size: 14px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 5px;
            }
            .phone {
              font-size: 12px;
              color: rgba(0, 0, 0, 0.65);
            }
          }
        }
        .label-list {
          display: flex;
          .label {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            padding: 5px;
            margin-right: 10px;
            &:last-child {
              margin-right: 0;
            }
            .title {
              padding: 5px 0 3px;
              font-size: 14px;
              color: rgba(0, 0, 0, 0.85);
              text-align: center;
              margin-bottom: 8px;
            }
            .desc {
              font-size: 12px;
              color: rgba(0, 0, 0, 0.45);
            }
          }
        }
      }
      .line-2 {
        .label-list {
          display: flex;
          flex-wrap: wrap;
          .label {
            padding: 0 10px;
            line-height: 30px;
            font-size: 12px;
            line-height: 22px;
            color: #409eff;
            border-radius: 4px;
            border: 1px solid #d9ecff;
            margin-right: 4px;
            margin-top: 6px;
          }
        }
      }
    }
  }
  .panel-desc {
    flex-shrink: 0;
    .title {
      height: 50px;
      padding: 0;
      line-height: 50px;
      font-size: 14px;
      color: #409eff;
      font-weight: bold;
      border-bottom: 1px solid #e0e0e0;
    }
    .list {
      width: 100%;
      padding-top: 10px;
      .item {
        width: 96%;
        height: 40px;
        padding-right: 10px;
        display: flex;
        align-items: center;
        overflow: hidden;
        .label {
          flex-shrink: 0;
          width: 80px;
          color: rgba(0, 0, 0, 0.45);
        }
        .value {
          flex-shrink: 0;
          flex-grow: 1;
          color: rgba(0, 0, 0, 0.85);
        }
      }
    }
  }
  .panel-record {
    width: 100%;
    height: calc(100vh - 88px - 160px - 40px);
    .panel-left {
      height: 100%;
      overflow-y: auto;
      .list {
        padding-right: 10px;
        width: 100%;
      }
    }
    .panel-right {
      height: 100%;
      border-left: 2px solid rgb(243, 244, 245);
      padding-left: 10px;
      .title {
        height: 50px;
        padding: 0;
        line-height: 50px;
        font-size: 14px;
        color: #409eff;
        font-weight: bold;
        border-bottom: 1px solid #e0e0e0;
      }
    }
    .desc {
      color: rgba(0, 0, 0, 0.45);
      height: 30px;
      line-height: 30px;
      margin-bottom: 10px;
    }
    .list {
      .item {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        margin-bottom: 10px;
        background-color: #f7f7f7;
        border-radius: 3px;
        border: 1px solid #409eff;
        padding: 16px 10px;
        .center {
          flex-grow: 1;
          .line {
            width: 100%;
            line-height: 22px;
            margin-bottom: 14px;
            .time {
              color: rgba(0, 0, 0, 0.45);
            }
          }
          .text-2 {
            margin-bottom: 4px;
            word-break: break-all;
          }
        }
      }
    }
  }
}
.content-2 {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-top: 1px solid #e0e0e0;
  padding-top: 10px;

  .audio-box {
    width: 100%;
    padding: 0 24px;
    flex-shrink: 0;
    audio {
      width: 100%;
    }
  }
  .content-center {
    width: 100%;
    flex: 1 1 auto;
    padding: 24px;
    overflow-y: auto;
    .list {
      width: 100%;
      margin-bottom: 10px;
      .item {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        padding: 0;
        padding-right: 34px;
        &.right {
          justify-content: flex-end;
          padding: 0;
          padding-left: 34px;
        }
        .avatar {
          flex-shrink: 0;
          background: #ccc;
          color: #ffffff;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          .img-logo {
            width: 18px;
          }
        }
        .dialog {
          position: relative;
          font-size: 14px;
          margin: 0 8px;
          padding: 6px 16px 10px;
          border-radius: 4px;
          background-color: rgb(240, 242, 245);
          &:after {
            content: '';
            position: absolute;
            left: auto;
            right: -12px;
            top: 10px;
            border: 6px solid transparent;
            border-left-color: rgb(240, 242, 245);
          }
          &.light {
            cursor: pointer;
            background: rgb(217, 236, 255);
            &:after {
              content: '';
              position: absolute;
              left: -12px;
              right: auto;
              top: 10px;
              border: 6px solid transparent;
              border-right-color: rgb(217, 236, 255);
            }
          }
          .icon-yuyin {
            width: 20px;
            position: relative;
            top: 4px;
            &.playing {
              animation: flash 1s infinite;
            }
            @keyframes flash {
              from {
                opacity: 1;
              }
              50% {
                opacity: 0;
              }
              to {
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }
}
.bottom {
  width: 100%;
  box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.15);
  padding: 24px 32px;
  background: #ffffff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 14px;
  .line1 {
    display: flex;
    justify-content: flex-end;
    .list {
      display: flex;
      border: 1px solid #ddd;
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 25px;
        padding: 0 12px;
        border-right: 1px solid #ddd;
        cursor: pointer;
        &:last-child {
          border-right: none;
        }
        &.active {
          background: #409eff;
          color: #fff;
          position: relative;
          &::after {
            content: '';
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            top: -9px;
            left: 14px;
            border: 3px solid transparent;
            border-top-width: 5px;
            border-top-color: #0364ff;
          }
        }
        &:hover {
          background: #e6a23c;
          color: #fff;
        }
      }
    }
  }
  .line2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .button {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.disable {
  color: #ccc;
}

.form {
  margin-top: 40px;
  padding-right: 20px;
  .el-select {
    width: 100%;
  }
  .el-radio {
    margin-bottom: 10px;
  }
}
.el-empty {
  width: 100%;
}
.message-box {
  width: 100%;
  padding: 20px;
  .list .item .dialog.light {
    flex-grow: 1;
    padding: 20px 20px 40px;
  }
}
.message-title {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.message-content {
  text-align: left;
}
</style>
